<template>
    <div class="r-page mx-5-t" >
        <div class="all-top" :style="{ height: layout.chartsHeight + 'px' }" :class="[tradingView.chartsType == 'TradingView' ? 'tvbg' : '']">
            <div class="n-tops">
                <jLink :list="items" @hit="backTo"></jLink>
            </div>
            <CoinState style="margin-top: 0;" :coin="coin"></CoinState>
            <div :class="[tradingView.chartsType=='TradingView'?'trWidth':'']" style="position: relative;">
                <!-- <TradingView></TradingView> -->
                <component :is="componentList[tradingView.chartsType]"></component>
                <div class="t-loading"  v-if="layout.chartsLoading">
                    <Loading></Loading>
                </div>
            </div>
        </div>

        <div class="all-line" @mousedown="onStart" @touchstart="touStart" @mouseup="onEnd($event)"
            @touchend="onEnd($event)"></div>

        <div class="j-fast c-title-4">
            <div class="j-fbtn" @click="jump(0)" :class="{ cur: true }">{{ i18n.global.t('message.Position.a') }}</div>
            <div class="medium">
                <!-- <span class="icon" v-if="layout.mediumChart">
                    <VIcon>mdi mdi-apple-keyboard-control</VIcon>
                </span>
                <span class="icon" v-else>
                    <VIcon>mdi mdi-minus</VIcon>
                </span> -->
                <span class="icon" @click="otherMin">
                    <VIcon>mdi mdi-minus</VIcon>
                </span>
            </div>
            <div class="maxmin">
                <!-- 最大化 -->
                <!-- <div class="ico-ig" @click="otherMax" v-if="!otherIsMax&&!otherIsMin"></div> -->
                <span class="iconfont icon-zhankai" @click="otherMax" v-if="!otherIsMax&&!otherIsMin"></span>


                <!-- 恢复 -->
                <!-- <div class="ico-ig mt1" :class="{mins: otherIsMin}" @click="otherRecover" v-else></div> -->
                <span class="iconfont icon-xialajiantouxiao" :class="{mins: otherIsMin}" @click="otherRecover" v-else></span>

                <!-- <span class="iconfont icon-zhankai" @click="otherMax" v-if="!otherIsMax&&!otherIsMin" :title="$t('message.fast.e')"></span>
                <span class="iconfont icon-zhankai1" @click="otherRecover" v-else :title="$t('message.fast.d')"></span> -->
            </div>
        </div>

        <div class="all-bottom" ref="doms">
            <Position></Position>
            <div style="height: 20px;"></div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import CoinState from "./components/CoinState/CoinState.vue";
// import Skill from "./components/skill/index.vue"
// import Chart from "./components/chart/index.vue"
import Chart from "@/components/chart/index.vue";
import Position from "./components/position/index.vue";

import { useTokens } from "@/stores/tokens";
import { URL_COIN_PAIR_DETAIL } from "@/comm/api";
import { get } from "@/comm/request";
import { onBeforeMount, watch } from "vue";
import { useKline } from "@/stores/kline";
import { ICoin } from "./type";
import i18n from "@/locals";
import TradingView from "@/components/tradingView/tradView.vue"
import { useTradingView } from "@/stores/tradingVIew";
import Loading from "@/components/chart/loading/index.vue";
import { useLayout } from "@/stores/layout";
import jLink from "@/components/j-link/index.vue";
import { useRoute, useRouter } from "vue-router";

import { Bus, CHART_KLINE_SUBSCRIBE, CHART_KLINE_SUBSCRIBE_TIME, CONN_ACTIVITY_RETRY, SizeChart, CHANGE_HOME_CHART } from "@/connetion/Bus";
let layout = useLayout()
const router = useRouter();
const tradingView =  useTradingView()
const kline = useKline();

const heightData = window.innerHeight * 0.5;

console.log("---------- layout", layout)

const route = useRoute();
const coin = ref<ICoin>({} as any);
const tokens = useTokens();
// 组件注册（伪注册）
const componentList = {
    TradingView,
    Chart
}
onMounted(async () => {
    console.warn("##jsz", route.name);
    let K_TIME_COIN = localStorage.getItem('K_TIME_COIN')||'D1'
    kline.changeCoinToDay(route.params.id + "",K_TIME_COIN);
    console.log("coin detail onMounted", route);
    let res: any = await get(URL_COIN_PAIR_DETAIL.replace("@", route.params.id + ""));
    console.log(res, "coin----");
    coin.value = res.data || {};

    lastChartHeight = layout.chartsHeight;
    Bus.emit(SizeChart);

});

watch(()=>layout.chartsLoading, ()=>{
    setTimeout(()=>{
        Bus.emit(SizeChart);
    }, 600)
    
})

const getDesc = computed(() => {
    let lang = localStorage.getItem("language") || "zh";
    let map: any = { zh: "CN", en: "EN" };
    let item = coin.value.details.find(i => i.language == map[lang]);
    if (item) {
        return item.description;
    }
    return "";
});

const items = ref([
    {
        // title: "主頁",
        title: i18n.global.t("message.Global.Home"),
        disabled: false,
        href: "/"
    },
    {
        // title: "币",
        title: i18n.global.t("message.Global.child.a"),
        disabled: true,
        href: ""
    }
]);

const list = ref<any[]>([]);
onMounted(() => {
    for (let i = 0; i < 40; i++) {
        addItem();
    }

    setTimeout(() => {
        for (let i = 0; i < 40; i++) {
            addItem();
        }
    }, 3000);
});

const addItem = () => {
    list.value.push({ num: Math.random() });
};

const backTo = (e: any) => {
    console.log(e);
    router.push(e.href)
}


let sx = 0;
let sy = 0;
let h = 0;
layout.chartsMax(window.innerHeight - heightData);

const touStart = (e: any) => {
    layout.toggleIsOnEnd(true)

    const client = e.changedTouches[0]
    if (client) {
        sx = client.clientX;
        sy = client.clientY;
        // console.log('用户触摸！！！', sx, sy)
        h = layout.$state.chartsHeight;
        window.addEventListener("touchmove", touchMove);
        window.addEventListener("touchend", onUp)
    }
}
const onStart = (e: any) => {
    layout.toggleIsOnEnd(true)

    console.log(e);
    sx = e.clientX;
    sy = e.clientY;
    // console.log(sx, sy, "鼠标坐标");
    h = layout.$state.chartsHeight;
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
};
const touchMove = (e: any) => {
    // console.log('用户触摸移动中', e)
    const client = e.changedTouches[0]
    if (client) {
        layout.$state.chartsHeight = h + client.clientY - sy;
    }
    if (layout.$state.chartsHeight > (window.innerHeight - heightData)) {
        layout.$state.maxChart = true;
    } else {
        layout.$state.maxChart = false;

    }
}
const onMove = (e: any) => {
    // console.log('用户移动中', e)
    // sx = e.clientX;
    layout.$state.chartsHeight = h + e.clientY - sy;
    // console.log(layout.$state.chartsHeight, (window.innerHeight - heightData))
    if (layout.$state.chartsHeight > (window.innerHeight - heightData)) {
        layout.$state.maxChart = true;
    } else {
        layout.$state.maxChart = false;

    }
};
// 阻止默认事件
function onEnd(e: Event) {

    layout.toggleIsOnEnd(false)
}
const onUp = (e: any) => {
    lastChartHeight = layout.chartsHeight;
    window.removeEventListener("mousemove", onMove);
    window.removeEventListener("mouseup", onUp);
    window.removeEventListener("touchmove", touchMove);
    window.removeEventListener("touchend", onUp)
    Bus.emit(SizeChart);
};
let maxChart = ref(false);
// const mediumChart = ref(false)
const doms = ref<any>(null);
const curHash = ref<any>(null);
const step = [0, 240, 550];
const inScorll = ref(false)
let lastChartHeight = 0;
const fast = ref<any>(null);
const otherIsMax = ref(false);
const otherIsMin = ref(false);
const otherMin = () => {
    console.log("最小化")
    const smartlDom = document.querySelector('.position')
    let cleverOne: number = 0;
    let totalH: number = 0;
    if (smartlDom) {
        layout.chartsHeight = window.innerHeight - 132
    }
    // console.log('fast 高度', fast.value.offsetHeight, 'totalH', totalH)
    // layout.mediumChart = !layout.mediumChart
    Bus.emit(SizeChart);

    otherIsMin.value = true;
}
const toggleSize = () => {
    if (!maxChart.value) {
        lastChartHeight = layout.$state.chartsHeight;
        layout.$state.chartsHeight = 0;
    } else {
        layout.$state.chartsHeight = window.innerHeight - heightData;
    }
    maxChart.value = !maxChart.value
    Bus.emit(SizeChart);
};
const otherMax = ()=>{
    console.log("最大化")
    // lastChartHeight = layout.chartsHeight;
    layout.chartsHeight = 0;
    otherIsMax.value = true;
    otherIsMin.value = false;
    Bus.emit(SizeChart);
}

const otherRecover = ()=>{
    console.log("恢复")
    layout.chartsHeight = lastChartHeight;
    // maxChart.value = true
    otherIsMax.value = false;
    otherIsMin.value = false;
    Bus.emit(SizeChart);
}
const jump = (n: number) => {
    if (layout.$state.chartsHeight == window.innerHeight - heightData) {
        layout.$state.chartsHeight = window.innerHeight - 300;
        layout.$state.maxChart = false;
    }
    curHash.value = n;
    let num = 0;
    // if(n)
    // if (n == 1) {
    //     num = step[1];
    // } else if (n == 2) {
    //     num = step[2];
    // }
    // doms.value.scrollTop = num;
    inScorll.value = true
    const setInScorll = () => {
        setTimeout(() => {
            inScorll.value = false
        }, 1000);
    }
    if (n == 0) {
        const cleverDeal_el = document.getElementById("cleverDeal_box");
        if (cleverDeal_el) {
            cleverDeal_el.scrollIntoView({ behavior: 'smooth' })
            setInScorll()
        }
    }
    if (n == 1) {
        const swap_el = document.getElementById("swap_box");
        if (swap_el) {
            swap_el.scrollIntoView({ behavior: 'smooth' })
            setInScorll()
        }
    }
    if (n == 2) {
        const activit_el = document.getElementById("activit_box");
        if (activit_el) {
            activit_el.scrollIntoView({ behavior: 'smooth' })
            setInScorll()
        }
    }
};

</script>

<style lang="less" scoped>
@import url("./index.less");
.trWidth{
    height: 100%;
}
.t-loading {
    width: 100%;
    height: calc(100% - 1px);
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mx-5-t{
    margin: 0 var(--space)  ;
    background-color: #1c1f25;
}
.jjt {
    height: 240px;
    width: 400px;
    border: solid 1px #f0f0f0;
    margin: 40px auto;

    .jjt-item {
        width: 100%;
        background: #048096;
        color: #fff;
        padding: 4px;
        margin-bottom: 2px;
    }
}
.tvbg{
background-color: #131722;
}
</style>
